<template>
	<el-card header="相似图片" v-if="topic && topic.img.key[2].content">
		<div v-infinite-scroll="showOrderImgLoadMethod" style="max-height: 600px; overflow-y:auto; overflow-x: hidden">
			<div>
				<el-row :gutter="10" v-if="topic.img.key[2].content">
					<el-col :span="4" class="mb" v-for="(item, index) in topic.img.key[2].content" :key="index">
						<div class="order_img_box" :class="[item.url === topic.img.key[0].content ? 'current' : '']">
							<el-image class="picture_img" :src="item.url" :preview-src-list="[item.url]" hide-on-click-modal></el-image>
							<p style="font-size: 12px;">汉明距离: {{item.hd}}</p>
							<el-button v-if="item.url === topic.img.key[0].content" disabled class="picture_btn" size="mini" @click="clickPic(item)">当前图片</el-button>
							<el-button v-else class="picture_btn" size="mini" @click="clickPic(item)">选这张</el-button>
						</div>
					</el-col>
				</el-row>
				<el-empty v-else></el-empty>
			</div>
		</div>
	</el-card>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
	name: 'laPictureList',
	props: ['topic'],
	setup (props, context) {
		const showUploadImg = ref(false)
		const showOrderImg = ref(false)
		const showOrderImgLoad = ref(0)
		const clickPic = (item) => {
			context.emit('replacePic', item.url)
		}
		const showOrderImgLoadMethod = () => {
			showOrderImgLoad.value++
		}

		return {
			clickPic,
			showOrderImgLoadMethod,
			showOrderImg,
			showUploadImg
		}
	}
})
</script>

<style lang="scss" scoped>
.order_img_box {
	border: 1px solid #ddd;
	padding: 8px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	.picture_img {
		margin-bottom: 10px;
	}
	.picture_btn {

	}
	&.current {
		border-color: #409EFF;
		background: rgba(64,158,255,.1);
	}
}
.mb{
	margin-bottom: 10px;
}
</style>
